<template>
  <div class="issue-chart">
    <el-empty class="nodata" v-if="!scoreTypeList.length" />
    <div class="menu-box" v-else>
      <svg-icon class="btn-back pointer" icon-class="back-o" @click="topId = ''" v-if="topId" />
      <el-radio-group class="tab-box" size="mini" v-model="scoreType">
        <el-radio-button v-for="item in scoreTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
      </el-radio-group>
      <div class="score-type-name">{{ showTitle }}</div>
      <el-empty class="nodata" v-if="!chartData.length" />
    </div>
    <div class="chkitem-chart" ref="container" />
  </div>
</template>
<script>
// 检查项问题图表
import * as echarts from 'echarts'
export default {
  name: 'IssueChart',
  props: { data: { type: Array, default: () => [] } },
  data() {
    return {
      scoreTypeList: [],
      scoreType: '',
      topId: ''
    }
  },
  computed: {
    currItem() {
      // 当前 tab
      const list = this.scoreTypeList || []
      const item = list.find(i => i.value === this.scoreType)
      return item || {}
    },
    currSubItem() {
      // 子项前五类
      const { currItem, topId } = this
      if (!topId) return {}

      const list = currItem.list || []
      const item = list.find(i => i.id === topId)
      return item || {}
    },
    chartData() {
      return this.currSubItem.list || this.currItem.list || []
    },
    showTitle() {
      if (this.topId) return `${this.currSubItem.label || ''}问题数量（前五类）`
      return `${this.currItem.label || ''}问题数量（前五类）`
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.init()
      }
    },
    scoreType() {
      this.topId = ''
      this.handleChart()
    },
    topId() {
      this.handleChart()
    }
  },
  methods: {
    init() {
      const data = this.data || []
      this.scoreTypeList = data
      this.scoreType = data[0]?.value || 'fsl'
      this.topId = ''
      this.handleChart()
    },
    handleChart() {
      const container = this.$refs.container
      const ctx = echarts.getInstanceByDom(container) || echarts.init(container)

      const { scoreTypeList, chartData } = this
      const data = chartData.map(i => ({ name: i.label, value: i.num, id: i.id, list: i.list || [] }))

      if (!scoreTypeList.length || !chartData.length) {
        ctx.clear()
        this.ctx = ctx
        return
      }

      const option = {
        tooltip: {
          confine: true, // 始终在可视区域内
          extraCssText: 'z-index: 2; white-space: normal; word-break: break-all;',
          formatter: params => `<div>
            <span>${params.marker}</span>
            <span>${params.name}</span>
            <span style="float:right;margin-left:20px;font-weight:900">${params.value} 个</span>
          </div>
          <div>
            <span style="display:inline-block;width:14px;height: 10px;"></span>
            <span>问题占比</span>
            <span style="float:right;margin-left:20px;font-weight:900">${params.percent} %</span>
          </div>`
        },
        legend: {},
        series: [
          {
            type: 'pie',
            data,
            center: ['50%', '62%'],
            radius: '60%',
            label: {
              formatter: '{c}',
              position: 'inner',
              fontSize: 13,
              color: '#000',
              textBorderColor: 'rgba(255, 255, 255, 0.8)',
              textBorderWidth: 3
            },
            itemStyle: {
              borderColor: 'white',
              borderWidth: 1
            }
          }
        ]
      }
      ctx.setOption(option)

      ctx.off('click')
      ctx.on('click', params => {
        // 管理动作不展示子级
        if (this.scoreType === 'gldz') return
        // 已在子级
        if (this.topId) return
        // 子级无数据
        if (!params.data.list.length) return
        this.topId = params.data.id
      })

      this.ctx = ctx
    },
    resize() {
      this.ctx?.resize()
    }
  }
}
</script>
<style lang="scss" scoped>
$red: #c9151e;

.issue-chart {
  position: relative;
}
.nodata {
  position: absolute;
  left: 50%;
  margin-left: -80px;
}
.menu-box {
  text-align: center;
}
.btn-back {
  font-size: 24px;
  color: $red;
  vertical-align: middle;
  margin-right: 10px;
}
// 更改 tab 样式
.tab-box /deep/ {
  .el-radio-button__inner {
    color: $red;
    border-color: $red;
    padding: 6px 10px;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: white;
    background-color: $red;
    border-color: $red;
    box-shadow: -1px 0 0 0 $red;
  }
}
.score-type-name {
  margin: 20px 0;
  font-size: 14px;
  font-weight: bold;
}
.chkitem-chart {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
</style>
